<template>
  <div class="actionNotice">
    <h1 class="con-right-title">
      通知管理
    </h1>
    <div class="bottom-box">
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:actionNotice:add'"
            type="warning"
            icon="el-icon-plus"
            @click="addEditAction('add')"
          >
            创建通知
          </el-button>
          <freshCom @searchList="getList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="通知编号(ID)"
            prop="id"
            min-width="120"
          ></el-table-column>
          <el-table-column label="触达通道" prop="touchType" min-width="100">
            <template slot-scope="scope">
              <span
                v-if="scope.row.touchType"
                class="tag-span"
                :class="scope.row.touchType | filterClass('touchType')"
                >{{ scope.row.touchType | filterName('touchType') }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="终端"
            prop="displayTerminals"
            min-width="90"
          ></el-table-column>
          <el-table-column label="标题" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.title ? scope.row.title : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createdDate"
            min-width="120"
          ></el-table-column>
          <el-table-column label="审核状态" min-width="120">
            <template slot-scope="scope">
              <span
                v-if="scope.row.auditingState === 'UNAUDITED'"
                class="tag-span default"
                >未审核</span
              >
              <span
                v-else-if="scope.row.auditingState === 'PASS'"
                class="tag-span primary"
                >通过</span
              >
              <span
                v-else-if="scope.row.auditingState === 'FAIL'"
                class="tag-span warning"
                @click="showFailReason(scope.row)"
                >未通过</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="提交状态" prop="submitState" min-width="120">
            <template slot-scope="scope">
              <span
                v-if="scope.row.submitState === 'SUBMIT'"
                class="tag-span primary"
                >已提交</span
              >
              <span
                v-else-if="scope.row.submitState === 'UNSUBMITTED'"
                class="tag-span warning"
                >未提交</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建者"
            prop="user.name"
            min-width="160"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.submitState === 'UNSUBMITTED'"
                type="text"
                @click="handelsubmit(scope.row.id)"
              >
                提交
              </el-button>
              <template v-permission="'wh:system:actionNotice:edit'">
                <el-button
                  v-if="
                    scope.row.submitState === 'UNSUBMITTED' ||
                      scope.row.noticeAuditing.oneAuditing.auditingState ===
                        'FAIL'
                  "
                  type="text"
                  @click="addEditAction('edit', scope.row.id)"
                >
                  编辑
                </el-button>
              </template>
              <el-button type="text" @click="handleDetail(scope.row)">
                查看详情
              </el-button>
              <template v-permission="'wh:system:actionNotice:remove'">
                <el-button
                  v-if="
                    scope.row.submitState === 'UNSUBMITTED' ||
                      scope.row.auditingState === 'FAIL'
                  "
                  type="text"
                  @click="handleDel(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="getList"
        ></pageCom>
      </div>
    </div>
    <addEditDialog
      v-if="dialogCreateData.isShow"
      :dialog-data="dialogCreateData"
      :touch-type-list="touchTypeList"
      @refresh="refresh"
    ></addEditDialog>
    <!-- 查看详情 dialog -->
    <detailDialog
      v-if="dialogDetailData.isShow"
      :dialog-data="dialogDetailData"
    ></detailDialog>
  </div>
</template>
<script>
import topSearch from '@component/noticeManagement/noticeManage/topSearch' // 上部搜索条件
import addEditDialog from '@component/noticeManagement/noticeManage/addEditDialog' // 创建编辑弹窗
import detailDialog from '@component/noticeManagement/noticeManage/detailDialog' // 查看详情弹窗
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  submitRequestAPI,
  deleteRequestAPI
} from '@/api/noticeManagement/noticeManage'
export default {
  name: 'noticeManage',
  msg: '通知管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addEditDialog,
    detailDialog
  },
  data() {
    return {
      id: '',
      loading: true,
      page: 1,
      row: 10,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 搜索条件
      formInline: {
        touchType: '',
        createTime: [],
        auditingState: '',
        submitState: '',
        startTime: '', // 开始时间
        endTime: '', // 结束时间,
        searchContent: ''
      },
      tableData: [],
      dialogCreateData: {
        isShow: false, // 默认隐藏
        type: '',
        noticeId: ''
      },
      // 查看详情
      dialogDetailData: {
        // 默认隐藏
        isShow: false,
        params: ''
      },
      // 选中的行
      multipleSelection: [],
      touchTypeList: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.getList()
    this.getTouchChannel()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    getList() {
      this.loading = false
      let params = { ...this.formInline, ...this.searchParams }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 新增/编辑
    addEditAction(type, noticeId) {
      this.dialogCreateData.isShow = true
      this.dialogCreateData.type = type
      if (noticeId) {
        this.dialogCreateData.noticeId = noticeId
      }
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    },
    // 提交
    handelsubmit(id) {
      this.$confirm('确定要提交该消息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          submitRequestAPI(
            id,
            (response) => {
              this.getList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // 查看详情
    handleDetail(row) {
      this.dialogDetailData.isShow = true
      this.dialogDetailData.params = row.id
    },
    // 删除
    handleDel(id) {
      this.$confirm('确定删除该条消息信息吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRequestAPI(
            id,
            (response) => {
              this.getList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    /* 重置 */
    reset() {},
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.getList()
    },
    // 获取触达通道
    async getTouchChannel() {
      const touchTypeList = await sysNormalDisable('activity_notice_type')
      this.touchTypeList = touchTypeList
    },
    showFailReason(row) {
      let reason = row.noticeAuditing.twoAuditing.remark
      this.$alert(`${reason}`, '系统提示', {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-conBtn {
  padding-left: 30px !important;
}
.el-table {
  margin-top: 20px;
  width: 99.9% !important;
}
.tag-success {
  background: #1dc8a4;
}
.reason-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 1999;
}
</style>
